<template>
  <div>
    <el-dialog title="选择专业班次" :visible.sync="dialogVisible" :close-on-click-modal="false" width="85%">
      <div class="wrapper-container">
        <div class='left'>
          <div class="tree">
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :indent="0" lazy :load="loadNode"></el-tree>
            <div class="hr"></div>
          </div>
        </div>
        <div class="right">
          <div class="table-container table-css">
            <el-table :data="tableData" border style="width: 1489px"  
            :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" 
            class="table-data"  :default-sort = "{prop: 'system', order: 'descending'}">
              <el-table-column label="选择" width="55"  align="center">
                  <template slot-scope="scope">
                      <el-checkbox @change="choseRow(scope.row)"></el-checkbox>
                  </template>
              </el-table-column>
              <el-table-column prop="className" label="专业班次" align="center"></el-table-column>
              <el-table-column prop="alias" label="别名" align="center"></el-table-column>
              <el-table-column prop="studentTeamShow" label="学员队" align="center"></el-table-column>
              <el-table-column prop="specialtyName" label="专业" align="center" ></el-table-column>
              <el-table-column prop="grade" label="年级" align="center" ></el-table-column>
              <el-table-column prop="campus" label="所在校区" align="center" >
                <template slot-scope="scope">
                  <span v-if="scope.row.campus == 0">本部校区</span>
                  <!-- <span v-if="scope.row.campus == 1">已通过</span> -->
                </template>
              </el-table-column>
              <el-table-column prop="ratedNumber" label="额定人数" align="center"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getFirstLevel,getZY,getNewZY,getZYBC,getlistYear} from "@/api/student";
export default {
  name: "ChoseZY",
  data(){
    return {
      dialogVisible:false,
      defaultProps: {
        children: 'children',
        label: 'label',
        value:'value',
        isLeaf: 'leaf'
      },
      data: [],
      tableData: [],
      total:1,
      zy:{
        grade:'',//年级
        trainingLevelId:'',//培养层次
        specialty:'',//专业编号
      }
    }
  },
  mounted(){
  },
  methods:{
    loadNode(node, resolve) {
        if (node.level === 0) {
          this.initClass(resolve)
        }
        if (node.level == 1) {
          this.zy.trainingLevelId = node.data.value;
          this.getYear(resolve)
        }
        if (node.level == 2) {
            this.zy.trainingLevelId = node.parent.data.value;
            this.zy.grade = node.data.value
            this.getZYinfo(resolve)
        }
    },
    handleNodeClick(data,data1){
        if(data1.level == 3){
          this.zy.grade = data1.parent.value;
          this.zy.trainingLevelId = data1.parent.parent.value;
            this.zy.specialty = data.value;
            this.getLast()
        }
    },
    //获取培养层次
    async initClass(resolve){
      let params = {
        code:'pylevel'
      }
      let res = await getFirstLevel(params);
      if(res.code == 200){
        let data  = res.data.map(item=>{
          return {
            label:item.dictValue ,
            value:item.id,
            // leaf:true
          }
        })
        resolve(data)
      }
    },
    //添加年份
    async getYear(resolve){
      let res = await getlistYear(this.zy.trainingLevelId);
      if(res.code == 200){
        if(res.data.length>0){
          //年份
          let data = res.data.map(item=>{
            return {
              label:item,
              value:item,
              // leaf:true,
            }
          })
          resolve(data)
        }else{
          resolve([])
        }
      }
      // let current = new Date().getFullYear();
      // let dateData = [];//获取年级
      // for(let i=0;i<5;i++){
      //   dateData.push({
      //     label:(current - i)+'',
      //     value:(current - i)+'',
      //     leaf:false
      //   })
      // }
      // resolve(dateData)
    },
    //获取专业信息
    async getZYinfo(resolve){
      let res = await getNewZY(this.zy)
      if(res.code == 200){
        if(res.data.length>0){
          //专业
          let data = res.data.map(item=>{
            return {
              label:item.specialtyName,
              value:item.id,
              leaf:true,
            }
          })
          resolve(data)
        }else{
          resolve([])
        }
      }
    },
    //获取专业班次列表
    async getLast(){
      let res = await getZYBC(this.zy);
      if(res.code == 200){
      // if(res.code == 200 && res.data.length>0){
        this.tableData = res.data;
      }
    },
    choseRow(row){
        this.dialogVisible = false;
        this.$emit('choseZY',row)
    }
  }
};
</script>

<style lang="less" scoped>
.table-css {
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

}
</style>

<style lang="less" scoped>
@import "../styles/commonCss.less";
/deep/.el-table .ascending .sort-caret.ascending{
    border-bottom-color: #004CA7;
}
/deep/.el-table .descending .sort-caret.descending{
     border-top-color: #004CA7;
}
/deep/.el-table .sort-caret.ascending{
    border-bottom-color:rgba(0,76,167,0.5)
}
/deep/.el-table .sort-caret.descending{
    border-top-color:rgba(0,76,167,0.5)
}
.tree{
    position: relative;
    .hr{
        position: absolute;
        width: 1px;
        height: 58px;
        background: #fff;
        left: 27px;
        bottom: -17px;
    }
}
.wrapper-container{width: 100%;}
.left{
    width: 355px;
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 27px 20px 0 0;
    border-right: 2px solid #004CA7
}
.el-tree{
    color: #004CA7;
    /deep/.el-tree-node__label{
        font-size: 16px;
    }
    /deep/.treeitem:first-child{
        font-weight: bold
    } 
    /deep/.el-tree-node__expand-icon{
                color: #004CA7;
            }
    /deep/.el-tree-node.is-current>.el-tree-node__content{
        color: #004CA7;
        background-color:#fff ;
    }
    /deep/.el-tree-node__content{
        height: 36px;
    }
    /deep/.el-tree-node__content:hover {
        background-color: #fff;
    }
    /deep/.el-tree-node{
        position: relative;
        padding-left: 16px;
    }
    /deep/.el-tree-node__children{
        padding-left: 16px;
    }
    //竖线
    /deep/.el-tree-node::before{
        content:'';
        height:100%;
        width:1px;
        position: absolute;
        left: 27px;
        top: 17px;
        // border-width: 1px;
        // border-left:1px dashed rgba(0,76,167,0.39) ;

    }
    //当前最后一个节点的竖线高度固定
    /deep/.el-tree-node:last-child::before{
        height: 36px;
        border: none;
    }
    //横线
    /deep/.el-tree-node::after{
        content:'';
        height:20px;
        width:24px;
        position: absolute;
        left: -3px;
        top: 17px;
        // border-width: 1px;
        // border-top:1px dashed rgba(0,76,167,0.39) ;
    }
    /deep/[role=treeitem]{
        // padding-bottom: 26px; 
    }
    /deep/&:last-child::before{
        border: none;
    }
    //去掉最顶层的虚线
    /deep/&>.el-tree-node::after{
        border-top: none;
    }
}
.right{
    padding-left: 24px;
    width: calc(100% - 274px);
}
.wrapper-container {
  display: flex;
}
/deep/.el-dialog__body{
    padding-top: 0;
}
</style>

